/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from "react";
import './launchmode2.css';
import { useHistory } from "react-router-dom/cjs/react-router-dom";
import { useDispatch } from "react-redux";
import DownloadProcessBar from "@/components/DownloadProcessBar/downloadProcessBar";
import NavigateBar from "@/components/NavigateBar";

import icon_app_logo from "@/assets/icon_app_logo.png"

import icon_banner2_mode1_gha from "@/assets/icon_banner2_mode1_gha.jpg"
import icon_banner2_mode2_gha from "@/assets/icon_banner2_mode2_gha.jpg"
import icon_banner2_mode3_gha from "@/assets/icon_banner2_mode3_gha.jpg"
import icon_banner2_mode4_gha from "@/assets/icon_banner2_mode4_gha.jpg"
import icon_banner2_mode5_gha from "@/assets/icon_banner2_mode5_gha.jpg"

import icon_banner2_mode1_xaf from "@/assets/icon_banner2_mode1_xaf.jpg"
import icon_banner2_mode2_xaf from "@/assets/icon_banner2_mode2_xaf.jpg"
import icon_banner2_mode3_xaf from "@/assets/icon_banner2_mode3_xaf.jpg"
import icon_banner2_mode4_xaf from "@/assets/icon_banner2_mode4_xaf.jpg"
import icon_banner2_mode5_xaf from "@/assets/icon_banner2_mode5_xaf.jpg"

import icon_banner2_mode1_fcfa from "@/assets/icon_banner2_mode1_fcfa.jpg"
import icon_banner2_mode2_fcfa from "@/assets/icon_banner2_mode2_fcfa.jpg"
import icon_banner2_mode3_fcfa from "@/assets/icon_banner2_mode3_fcfa.jpg"
import icon_banner2_mode4_fcfa from "@/assets/icon_banner2_mode4_fcfa.jpg"
import icon_banner2_mode5_fcfa from "@/assets/icon_banner2_mode5_fcfa.jpg"

import icon_banner2_mode1_ksh from "@/assets/icon_banner2_mode1_ksh.jpg"
import icon_banner2_mode2_ksh from "@/assets/icon_banner2_mode2_ksh.jpg"
import icon_banner2_mode3_ksh from "@/assets/icon_banner2_mode3_ksh.jpg"
import icon_banner2_mode4_ksh from "@/assets/icon_banner2_mode4_ksh.jpg"
import icon_banner2_mode5_ksh from "@/assets/icon_banner2_mode5_ksh.jpg"

import icon_banner2_mode1_ugx from "@/assets/icon_banner2_mode1_ugx.jpg"
import icon_banner2_mode2_ugx from "@/assets/icon_banner2_mode2_ugx.jpg"
import icon_banner2_mode3_ugx from "@/assets/icon_banner2_mode3_ugx.jpg"
import icon_banner2_mode4_ugx from "@/assets/icon_banner2_mode4_ugx.jpg"
import icon_banner2_mode5_ugx from "@/assets/icon_banner2_mode5_ugx.jpg"

import icon_about_arrow from '@/assets/icon_about_arrow@2x.png'

import icon_guide_rate_star from "@/assets/icon_guide_rate_star.png"
import icon_guide_rate_size from "@/assets/icon_guide_rate_size.png"
import icon_guide_rate_download from "@/assets/icon_guide_rate_download.png"

import { saveEvent } from "@/store/actions/saveEvent";
import { LangStore } from "@/utils/langStore";

import { LangEnGhs } from "@/utils/langEnGhs";
import { LangEnKes } from "@/utils/langEnKes";
import { LangEnUgx } from "@/utils/langEnUgx";
import { LangFrFcfa } from "@/utils/langFrFcfa";
import { LangFrXaf } from "@/utils/langFrXaf";
import { setAreaInfo } from "@/utils/storage";
import { getAppConfigAndCallback } from "@/store/actions/appConfig";
import { DotLoading, Mask } from "antd-mobile";
import AppParams from "@/utils/appParams";
import SecurityPromptDialog from "@/components/SecurityPromptDialog/SecurityPromptDialog";


/**
 * 落地页-1
 */
export default function LaunchMode2Download() {

    // loading状态
    const [maskVisible, setMaskVisible] = useState(false)

    // 获取路由历史 history 对象
    const history = useHistory()

    // 文案翻译
    const [curLang, setCurLang] = useState(null);

    // 接口转发
    const [curPath, setCurPath] = useState(null);

    // 商店截图
    const [curPlayIcons, setCurPlayIcons] = useState([]);

    // 文案翻译
    const [curAppStore, setCurAppStore] = useState(LangStore);

    // 是否在下载
    const [isDownloading, setIsDownloading] = useState(false);

    //显示安全提示弹框
    const [securityPromptMaskVisible, setSecurityPromptMaskVisible] = useState(false);


    //获取 Redux 分发器
    const dispatch = useDispatch()

    // 当前下载链接
    let curLinkPath = null;

    const items = curPlayIcons.map((banner, index) => (
        <img className="launchmode2SwiperItemImageSelf" src={banner} alt="" key={index} />
    ));

    // 初始化链接
    const initLinkPath = () => {
        let isGpChannel = AppParams.isGpChannel();
        if (isGpChannel) {
            const linkPath = process.env.REACT_APP_CHANNEL_LINK_GP + "";
            curLinkPath = linkPath;
        } else {
            const linkPath = process.env.REACT_APP_CHANNEL_LINK + "";
            curLinkPath = linkPath;
        }
    };


    //启动时请求用户状态
    useEffect(() => {
        //添加 fb 像素
        // eslint-disable-next-line no-undef
        fbq('track', 'Page_Download');
        // eslint-disable-next-line no-undef
        gtag('track', 'Page_Download');

        // 直接返回
        const areaInfo = (process.env.REACT_APP_AREA_CURRENCY + "").toLowerCase();
        onDoGetZoneCallback(true, areaInfo);

        // 摘取配置
        //doGetAppConfig();
        onDoGetAppConfigCallback(true, "success");

        //打点
        doHitEvent("launchmode2download_START")

        return () => {
            //打点
            doHitEvent("launchmode2download_END");
        }
    }, []);


    //点击下载
    const onDoDownloadAction = () => {
        //打点
        doHitEvent("DOWNLOAD_INSTALL_CLICK");

        // 设置下载中
        setIsDownloading(true)

        if (curLinkPath && curLinkPath.length > 0) {
            window.location.href = curLinkPath;
        }
        // window.open(apkUrl, "_blank")
    }

    //已知晓安全事项,关闭提示弹框
    const onHandleSecurityPromptDialogClose = () => {
        // 关闭弹框
        setSecurityPromptMaskVisible(false)
    }

    //点击下载
    const onHandleInstallClick = () => {
        //打点
        doHitEvent("DOWNLOAD_INSTALL_CLICK");

        // 设置下载中
        setIsDownloading(true)

        // 初始化链接
        initLinkPath();

        if (curLinkPath && curLinkPath.length > 0) {
            window.location.href = curLinkPath;
        }
        // window.open(apkUrl, "_blank")


        // 关闭弹框
        setSecurityPromptMaskVisible(true);
    }

    // 下载动画完成
    const onHandleDownloadProcessFinish = () => {
        setIsDownloading(false);
    }

    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    //配置接口
    const doGetAppConfig = async () => {
        console.log("doGetAppConfig: ");

        try {
            //显示loading
            setMaskVisible(true);

            //获取Action
            const action = getAppConfigAndCallback(onDoGetAppConfigCallback);

            //触发接口
            await dispatch(action);

        } catch (e) {
            console.log(e)
        }
    };

    //配置接口 返回
    const onDoGetAppConfigCallback = (success, data) => {
        //显示loading
        setMaskVisible(false)

        // 初始化链接
        initLinkPath();

        // 直接下载
        onDoDownloadAction();


        // if (success) {
        //     if (data && data.length > 0) {
        //         // base字符串
        //         // const linkPath = atob(data)
        //         let isGpChannel = AppParams.isGpChannel();
        //         if (isGpChannel) {
        //             const linkPath = process.env.REACT_APP_CHANNEL_LINK_GP + "";
        //             curLinkPath = linkPath;
        //         } else {
        //             const linkPath = process.env.REACT_APP_CHANNEL_LINK + "";
        //             curLinkPath = linkPath;
        //         }
        //     }

        //     // 直接下载
        //     onDoDownloadAction();
        // }
    };

    // 请求转发接口 返回
    const onDoGetZoneCallback = (success, data) => {
        //关闭loading
        // setMaskVisible(false);

        console.log('请求转发接口 返回: ' + success);

        if (success && data) {
            setCurPath(data);
            setAreaInfo(data);

            // 判断是否个国家
            if (data.endsWith('gha') || data.endsWith('ghs')) {
                // 加纳
                setCurLang(LangEnGhs);
                setCurPlayIcons([icon_banner2_mode2_gha, icon_banner2_mode3_gha, icon_banner2_mode4_gha, icon_banner2_mode5_gha, icon_banner2_mode1_gha])

            } else if (data.endsWith('ksh') || data.endsWith('kes')) {
                // 肯尼亚
                setCurLang(LangEnKes);
                setCurPlayIcons([icon_banner2_mode2_ksh, icon_banner2_mode3_ksh, icon_banner2_mode4_ksh, icon_banner2_mode5_ksh, icon_banner2_mode1_ksh])

            } else if (data.endsWith('ugx')) {
                // 乌干达
                setCurLang(LangEnUgx);
                setCurPlayIcons([icon_banner2_mode2_ugx, icon_banner2_mode3_ugx, icon_banner2_mode4_ugx, icon_banner2_mode5_ugx, icon_banner2_mode1_ugx])

            } else if (data.endsWith('xaf')) {
                // 喀唛隆
                setCurLang(LangFrXaf);
                setCurPlayIcons([icon_banner2_mode2_xaf, icon_banner2_mode3_xaf, icon_banner2_mode4_xaf, icon_banner2_mode5_xaf, icon_banner2_mode1_xaf])

            } else {
                // 科特
                setCurLang(LangFrFcfa);
                setCurPlayIcons([icon_banner2_mode2_fcfa, icon_banner2_mode3_fcfa, icon_banner2_mode4_fcfa, icon_banner2_mode5_fcfa, icon_banner2_mode1_fcfa])
            }
        }
    };


    return (
        <div className="launchmode2Root">
            <NavigateBar theme="transparent" onAddFavorite={() => { }} onAddHome={() => { }}></NavigateBar>

            {/* 拿到地区数据时才刷新 */}
            {curLang && <div className="launchmode2Root">
                {/* app 图标 */}
                <div className="launchmode2RowGlobalPadding">
                    <img className="launchmode2AppLogo" src={icon_app_logo} alt="" />

                    <div className="launchmode2ColumnFullRight launchmode2PaddingLeft16Px">
                        <span className="launchmode2AppName">{curLang.appName}</span>
                        <span className="launchmode2AppOwner launchmode2MarginTop5Px">{curLang.appDev}</span>
                    </div>
                </div>

                {/* 评价、下载量 */}
                <div className="launchmode2RowGlobalPadding launchmode2MarginTop32Px launchmode2FlexCenter">
                    <div className="launchmode2ColumnStoreItem">
                        <img className="launchmode2StoreIcon" alt="" src={icon_guide_rate_star} />
                        <div className="launchmode2StoreText">{curAppStore.appReviewStar}</div>
                    </div>

                    <div className="launchmode2Space34Px"></div>

                    <div className="launchmode2ColumnStoreItem">
                        <div className="launchmode2StoreTextAgeLimit">{curAppStore.appAgeLimit}</div>
                    </div>

                    <div className="launchmode2Space34Px"></div>

                    <div className="launchmode2ColumnStoreItem">
                        <img className="launchmode2StoreIcon" alt="" src={icon_guide_rate_size} />
                        <div className="launchmode2StoreText">3M</div>
                    </div>

                    <div className="launchmode2Space34Px"></div>

                    <div className="launchmode2ColumnStoreItem">
                        <img className="launchmode2StoreIcon" alt="" src={icon_guide_rate_download} />
                        <div className="launchmode2StoreText">100K+</div>
                    </div>
                </div>

                {/* 跳转应用市场 */}
                {!isDownloading && <div className="launchmode2RowGlobalPadding launchmode2FlexCenter launchmode2MarginTop42Px launchmode2Padding26Px">
                    <div className="launchmode2BtnInstall launchmode2BackgroundBlue" onClick={onHandleInstallClick}>
                        <div className="launchmode2InstallText">{curLang.toInstall}</div>
                    </div>
                </div>}

                {isDownloading && <div className="launchmode2RowGlobalPadding launchmode2FlexCenter launchmode2MarginTop42Px launchmode2Padding26Px">
                    <DownloadProcessBar onAnimationFinish={() => { onHandleDownloadProcessFinish() }} />
                </div>}

                {/* banner */}
                <div className="launchmode2RowGlobalPadding launchmode2MarginTop60Px">
                    <div className="launchmode2SwiperContent">
                        {/* <Swiper
                        indicator={() => null}
                        defaultIndex={0}>
                        {items}
                    </Swiper> */}
                        {items}
                    </div>
                </div>

                {/* 申请步骤 */}
                <div className="launchmode2RowGlobalPadding launchmode2MarginTop17Px">
                    <div className="launchmode2StepTitle">{curLang.aboutThisApp}</div>
                    <img className="launchmode2StepIcon" src={icon_about_arrow} alt="" onClick={onHandleInstallClick} />
                </div>

                {/* 申请步骤 */}
                <div className="launchmode2RowGlobalPadding launchmode2FlexCenter launchmode2MarginTop10Px">
                    <div className="launchmode2StepText">
                        {curLang.appStoreListingRow1}<br></br>
                        {curLang.appStoreListingRow2}<br></br>
                        {curLang.appStoreListingRow3}<br></br>
                        {curLang.appStoreListingRow4}<br></br>
                        {curLang.appStoreListingRow5}<br></br>
                        {curLang.appStoreListingRow6}<br></br>
                    </div>
                </div>

                {/* 申请步骤 */}
                <div className="launchmode2ColumnGlobalPadding launchmode2MarginTop14Px">
                    <div className="launchmode2StepTitle launchmode2FontSize14px">{curLang.updatedOn}</div>
                    <div className="launchmode2StepText launchmode2FontColorUpdate launchmode2MarginTop5Px">{curLang.updatedDate}</div>
                </div>

                {/* 标签 */}
                <div className="launchmode2RowGlobalPadding launchmode2MarginTop28Px">
                    <div className="launchmode2CateTag">{curLang.topFreeFinance}</div>
                    <div className="launchmode2Space11Px"></div>
                    <div className="launchmode2CateTag">{curLang.finance}</div>
                </div>

                {/* 底部标签 */}
                <div className="launchmode2Space11Px launchmode2MarginTop42Px"></div>

            </div>}

            {!curLang && <div className="launchmode2LogoBg">
                <img className="launchmode2Logo" alt="" src={icon_app_logo} />
            </div>}

            {/* 安全提示弹框 */}
            <SecurityPromptDialog visible={securityPromptMaskVisible} onClose={onHandleSecurityPromptDialogClose} />

            <Mask visible={maskVisible} opacity={0.1}
                onMaskClick={() => { }}>
                <div className="launchmode2OverlayContent">
                    <span style={{ fontSize: 24, color: '#ff3141' }} >
                        <DotLoading color="currentColor" />
                    </span>
                </div>
            </Mask>
        </div>
    )
}